<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:v-on="http://www.w3.org/1999/xhtml"
      xmlns:v-bind="http://www.w3.org/1999/xhtml">

	<head>
		<meta charset="utf-8">
		<title>小K服务</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

        <link rel="shortcut icon" href="../../../static/favicon.ico" th:href="@{/favicon.ico}">
		<link rel="stylesheet" type="text/css" href="../../../static/plugins/layui/css/layui.css" th:href="@{/plugins/layui/css/layui.css}" />
        <link rel="stylesheet" type="text/css" href="../../../static/mui/css/mui.min.css" th:href="@{/mui/css/mui.min.css}" />
        <link rel="stylesheet" type="text/css" href="../../../static/mui/css/iconfont.css" th:href="@{/mui/css/iconfont.css}" />
		<link rel="stylesheet" type="text/css" href="../../../static/mobile/baoxiu/css/app.css" th:href="@{/mobile/baoxiu/css/app.css}" />
		<link rel="stylesheet" type="text/css" href="../../../static/mobile/baoxiu/css/color.css" th:href="@{/mobile/baoxiu/css/color.css}" />
		<style>
			.title {
				margin: 20px 15px 10px;
				color: #6d6d72;
				font-size: 15px;
			}
			
			.oa-contact-cell.mui-table .mui-table-cell {
				padding: 11px 0;
				vertical-align: middle;
			}
			
			.oa-contact-cell {
				position: relative;
				margin: -11px 0;
			}
			
			.oa-contact-avatar {
				width: 75px;
			}
			
			.oa-contact-avatar img {
				border-radius: 50%;
			}
			
			.oa-contact-content {
				width: 100%;
			}
			
			.oa-contact-name {
				margin-right: 20px;
			}
			
			.oa-contact-name,
			oa-contact-position {
				float: left;
			}
			
			.mui-table-view {
				margin-top: 15px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<!--<button type="button" class="mui-left mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left">
				<span class="mui-icon mui-icon-left-nav"></span>返回
			</button>-->
			<h1 class="mui-title"><span class="mui-icon iconfont icon-xueyuan color-2d53f7"></span>小K服务</h1>
			<!--<button type="button" class="mui-right mui-btn mui-btn-link mui-btn-nav mui-pull-right" onclick="loadPage(1);">
				<span class="mui-icon mui-icon-reload"></span>
			</button>-->
		</header>
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active" href="#home">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">首页</span>
			</a>
			<a class="mui-tab-item" href="#myRepair">
				<span class="mui-icon mui-icon-email"><!--<span class="mui-badge">9</span>--></span>
				<span class="mui-tab-label">我的报修</span>
			</a>
			<a class="mui-tab-item" href="#myAccount">
				<span class="mui-icon mui-icon-contact"></span>
				<span class="mui-tab-label">账户</span>
			</a>
		</nav>
		<div class="mui-content">
			<div id="home" class="mui-control-content mui-active">
				<ul class="mui-table-view mui-grid-view mui-grid-9">
					<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
						<a href="ipSearch.html" th:href="@{/user/schoolIp/index}" data-onclick="内网IP查询待开发....">
							<span class="mui-icon iconfont icon-ip color-2d53f7"></span>
							<div class="mui-media-body">内网IP查询</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
						<a href="repairClassify.html" th:href="@{/user/repair/classify}" data-onclick="学服报修待开发....">
							<span class="mui-icon iconfont icon-zhuanye color-2d53f7"><!--<span class="mui-badge">5</span>--></span>
							<div class="mui-media-body">学服报修</div>
						</a>
					</li>
                    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                        <a href="#" data-onclick="小K服务竭诚为您服务。" v-on:click="about">
                            <span class="mui-icon mui-icon-info color-2d53f7"><!--<span class="mui-badge">5</span>--></span>
                            <div class="mui-media-body">关于</div>
                        </a>
                    </li>
                    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3" th:if="${application.information != ''}">
                        <a href="#" v-on:click="information($event)">
                            <span class="mui-icon mui-icon-flag color-2d53f7"><span class="mui-badge">1</span></span>
                            <div class="mui-media-body">公告</div>
                        </a>
                    </li>
				</ul>
                <div style="display: none;" id="information" th:utext="${application.information}">这是公告内容</div>
			</div>
			<div id="myRepair" class="mui-control-content">
				<div class="title">当前用户的最近报修记录都将在这里显示</div>
				<ul class="mui-table-view">
					<li class="mui-table-view-cell mui-media" v-for="(item,index) in myRepair">
                        <span class="mui-badge" v-bind:class="{'mui-badge-warning':item.status==1,'mui-badge-blue':item.status==2||item.status==3,'mui-badge-success':item.status==4}">{{status[item.status]}}</span>
						<a href="javascript:void(0)" v-bind:href="'./repair/info/'+item.id">
							<!--<img class="mui-media-object mui-pull-left" src="../images/shuijiao.jpg">-->
							<div class="mui-media-body">
								{{item.classifyName}}-{{item.classifySubName}}
								<p class='mui-ellipsis'>时间：{{item.addTime}}</p>
							</div>
						</a>
					</li>
                    <li class="mui-table-view-cell mui-media" v-if="!myRepair || myRepair.length == 0">
                        <a href="javascript:void(0)">
                            <!--<img class="mui-media-object mui-pull-left" src="../images/shuijiao.jpg">-->
                            <div class="mui-media-body">
                                当前用户无报修单
                                <p class='mui-ellipsis'>哈哈，您还没有报修单</p>
                            </div>
                        </a>
                    </li>
					<!--/*<li class="mui-table-view-cell mui-media">
						<span class="mui-badge mui-badge-blue">未处理</span>
						<a href="repairInfo.html">
							&lt;!&ndash;<img class="mui-media-object mui-pull-left" src="../images/shuijiao.jpg">&ndash;&gt;
							<div class="mui-media-body">
								水电报修-水龙头
								<p class='mui-ellipsis'>时间：2015-01-12 12:12:12</p>
							</div>
						</a>
					</li>*/-->
				</ul>
                <div id="page"></div>
			</div>
			<div id="myAccount" class="mui-control-content mui-page-content">
				<!--<ul class="mui-table-view mui-table-view-chevron">
					<li class="mui-table-view-cell mui-media">
						<a href="javascript:void(0);" class="mui-navigate-right2">
							<img class="mui-media-object mui-pull-left head-img" id="head-img" src="" v-bind:data-src="'placeholder.js?40x42&text='+info.name.substr(0,1)">
							<div class="mui-media-body">
								{{info.name|defaultValue}}
								<p class='mui-ellipsis'>学号：{{info.stuId|defaultValue}}</p>
							</div>
						</a>
					</li>
				</ul>-->
				<ul class="mui-table-view">
					<li class="mui-table-view-cell">
						<a href="javascript:void(0);">姓名<span class="mui-pull-right">{{info.name|defaultValue}}</span></a>
					</li>
					<li class="mui-table-view-cell">
						<a href="javascript:void(0);">学号<span class="mui-pull-right">{{info.stuId|defaultValue}}</span></a>
					</li>
				</ul>
				<ul class="mui-table-view">
					<li class="mui-table-view-cell">
						<a href="javascript:void(0);" v-on:click="updatePhone">联系方式<span class="mui-pull-right">{{info.phone|defaultValue}}</span></a>
					</li>
					<li class="mui-table-view-cell">
						<a href="javascript:void(0);" v-on:click="updateEmail">邮箱地址<span class="mui-pull-right">{{info.email|defaultValue}}</span></a>
					</li>
					<li class="mui-table-view-cell">
						<a href="javascript:void(0);" v-on:click="updateRoom">宿舍信息<span class="mui-pull-right">{{info.room|defaultValue}}</span></a>
					</li>
				</ul>
				<ul class="mui-table-view" v-if="info.loginType == 'password'">
					<li class="mui-table-view-cell" style="text-align: center;color: red;">
						<a href="javascript:void(0);" v-on:click="updatePassword">修改密码</a>
					</li>
				</ul>
				<ul class="mui-table-view" v-else>
					<li class="mui-table-view-cell" style="text-align: center;color: red;">
						<a href="javascript:void(0);" v-on:click="setPassword">设置登录密码</a>
					</li>
				</ul>
				<ul class="mui-table-view">
					<li class="mui-table-view-cell" style="text-align: center;" v-on:click="loginOut">
						<a href="javascript:void(0);">退出登录</a>
					</li>
				</ul>
			</div>
		</div>
	</body>
	<script src="../../../static/mui/js/mui.min.js" th:src="@{/mui/js/mui.min.js}"></script>
	<script src="../../../static/plugins/layui/layui.js" th:src="@{/plugins/layui/layui.js}" type="text/javascript" charset="utf-8"></script>
	<!--<script src="../../../static/plugins/jquery-3.2.1.min.js" th:src="@{/plugins/jquery-3.2.1.min.js}" type="text/javascript" charset="utf-8"></script>-->
	<script src="../../../static/plugins/vuejs/vue.min.js" th:src="@{/plugins/vuejs/vue.min.js}" type="text/javascript" charset="utf-8"></script>
	<!--<script src="../../../static/plugins/placeholder.js" th:src="@{/plugins/placeholder.js}" type="text/javascript" charset="utf-8"></script>-->
	<!--<script src="../../../static/plugins/holder.min.js" th:src="@{/plugins/holder.min.js}" type="text/javascript" charset="utf-8"></script>-->

    <script src="../../../static/mobile/baoxiu/js/AjaxUrl.js" th:src="@{/mobile/baoxiu/js/AjaxUrl.js}" type="text/javascript" charset="utf-8"></script>
	<script th:inline="javascript">
        /*<![CDATA[*/
		layui.use(['layer', 'laypage'], function() {
			var layer = layui.layer,
				laypage = layui.laypage;
			var app = new Vue({
				el: ".mui-content",
				data: {
                    status:["未知","未处理","已打印","已送出","已完成","已取消"],
                    info: {
                        id: /*[[${session.user.id}]]*/"",
                        stuId: /*[[${session.user.stuId}]]*/"",
                        name: /*[[${session.user.name}]]*/"",
                        phone: /*[[${session.user.phone}]]*/"",
                        email: /*[[${session.user.email}]]*/"",
                        room: /*[[${session.user.room}]]*/"",
                        loginType: /*[[${session.loginType}]]*/""
                    },
                    myRepair:[],
					pageInfo: {
						page: 1
					}
				},
				methods: {
					updatePhone: function() {
						layui.layer.prompt({
							formType: 0,
							value: app.info.phone,
							title: '请输入新的手机号'
						}, function(value, index, elem) {
							layui.layer.close(index);
							mui.ajax({
								type: "post",
								data: {
									phone: value
								},
								url: AjaxUrl.user.setPhone,
								async: true,
								dataType: "json",
								success: function(data) {
									if(data.code === 0) {
                                        layui.layer.msg(data.msg);
                                        app.info.phone=value;
									} else {
										layui.layer.msg(data.msg, {
											time: 20000,
											btn: ['明白了']
										});
									}
								},
								error: function() {
									layui.layer.msg("加载错误");
								}
							});
						});
					},
					updateEmail: function() {
						layui.layer.prompt({
							formType: 0,
							value: app.info.email,
							title: '请输入新的电子邮箱'
						}, function(value, index, elem) {
							layui.layer.close(index);
							mui.ajax({
								type: "post",
								data: {
									email: value
								},
								url: AjaxUrl.user.setEmail,
								async: true,
								dataType: "json",
								success: function(data) {
									if(data.code === 0) {
                                        layui.layer.msg(data.msg);
                                        app.info.email=value;
									} else {
										layui.layer.msg(data.msg, {
											time: 20000,
											btn: ['明白了']
										});
									}
								},
								error: function() {
									layui.layer.msg("加载错误");
								}
							});
						});
					},
					updateRoom: function() {
						layui.layer.prompt({
							formType: 0,
							value: app.info.room,
							title: '请输入新的宿舍信息'
						}, function(value, index, elem) {
							layui.layer.close(index);
							mui.ajax({
								type: "post",
								data: {
									room: value
								},
								url: AjaxUrl.user.setRoom,
								async: true,
								dataType: "json",
								success: function(data) {
									if(data.code === 0) {
                                        layui.layer.msg(data.msg);
                                        app.info.room=value;
									} else {
										layui.layer.msg(data.msg, {
											time: 20000,
											btn: ['明白了']
										});
									}
								},
								error: function() {
									layui.layer.msg("加载错误");
								}
							});
						});
					},
					updatePassword: function() {
						layui.layer.prompt({
							formType: 1,
							value: "",
							title: '请输入当前登录密码'
						}, function(value1, index, elem) {
							layui.layer.close(index);
							layui.layer.prompt({
								formType: 1,
								value: "",
								title: '请输入新的登录密码'
							}, function(value2, index, elem) {
								layui.layer.close(index);
								mui.ajax({
									type: "post",
									data: {
										password: value1,
										newPassword: value2
									},
									url: AjaxUrl.user.setNewPassword,
									async: true,
									dataType: "json",
									success: function(data) {
										if(data.code === 0) {
                                            layui.layer.msg(data.msg);
										} else {
											layui.layer.msg(data.msg, {
												time: 20000,
												btn: ['明白了']
											});
										}
									},
									error: function() {
										layui.layer.msg("加载错误");
									}
								});
							});
						});
					},
					setPassword: function() {
						layui.layer.prompt({
							formType: 1,
							value: "",
							title: '设置用户登录密码'
						}, function(value, index, elem) {
							layui.layer.close(index);
							mui.ajax({
								type: "post",
								data: {
									password: value
								},
								url: AjaxUrl.user.setPassword,
								async: true,
								dataType: "json",
								success: function(data) {
									if(data.code === 0) {
                                        layui.layer.msg(data.msg);
										app.info.loginType="password";
									} else {
										layui.layer.msg(data.msg, {
											time: 20000,
											btn: ['明白了']
										});
									}
								},
								error: function() {
									layui.layer.msg("加载错误");
								}
							});
						});
					},
                    loginOut:function () {
                        window.location.href="../userLoginOut"
                    },
                    information:function (evn) {
					    var info = document.getElementById("information");
                        mui.alert(info.innerHTML, '公告', function() {});
                    },
					loadPage: function(page) {
						if(page === undefined) {
							// 重新加载当前页面
						} else if(page * 1 < 1) {
							this.pageInfo.page = 1
						} else {
							this.pageInfo.page = page;
						}
                        mui.ajax({
                            type:"post",
                            data:app.pageInfo,
                            url:"./repair/myList",
                            async:true,
                            dataType:"json",
                            success:function(data){
                                if (data.code === 0) {
                                    layui.layer.msg(data.msg);
                                    app.myRepair = data.list;
                                    layui.laypage.render({
                                        elem: "page",
                                        count:data.count,
                                        limit:10,
                                        curr: data.pageCurr,
                                        groups: 5,
                                        jump: function(obj, first) {
                                            //得到了当前页，用于向服务端请求对应数据
                                            var curr = obj.curr;
                                            if(!first) { //点击跳页触发函数自身，并传递当前页：obj.curr
                                                app.loadPage(curr);
                                            }
                                        }
                                    });
                                }else {
                                    mui.toast(data.msg);
                                }
                            },
                            error:function(){
                                mui.toast("加载错误");
                            }
                        });
					},
                    about:function () {
                        mui.alert('小K服务竭诚为您服务。<br>开发者：侯坤林<br>电子邮件：lscode@163.com<br>友情支持：杨春峰<br>场地提供：计软创新实验室、C世界协会', '关于小K', function() {});
                    }
				},
				filters: {
					defaultValue: function(value) {
						if(value === undefined || value === "") {
							return "<空>"
						} else {
							return value;
						}
					}
				},
				mounted: function() {
					mui.init({
						swipeBack: true //启用右滑关闭功能
					});
					var tagAList = mui("a");
					mui.each(tagAList, function(index, item) {
						item.onclick = function() {
							var url = this.getAttribute("href");
							var autoShow = this.getAttribute("data-autoShow");
							if(!url || url === null || url === "" || url.indexOf("#") >= 0 || url.toLocaleLowerCase().indexOf("javascript") >= 0) {
								//mui.toast("无链接");
								var toast = this.getAttribute("data-onclick");
								if(toast && toast !== null && toast.trim() !== "") {
									mui.toast(toast);
								}
								return false;
							}
							if(!autoShow || autoShow === null || autoShow === "") {
								autoShow = true;
							} else {
								autoShow = false;
							}

							mui.openWindow({
								url: url,
								show: {
									autoShow: autoShow
								}
							});
							return false;
						};
					});
				}
			});
			app.loadPage(1);
		});
		/*$(function() {
			$.each($("img"), function(i, n) {

			});

			$.each($("img"), function(i, n) {
				var pic = $(this);
				var picId = pic.attr('id');
				if(pic.attr('data-src') == '') {
					Holder.add_image("holder.js/300x100", picId).run();
				} else if(pic.attr('data-src').indexOf('holder.js') >= 0) {
					Holder.add_image(pic.attr('data-src'), picId).run();
				} else {
					var src = pic.attr('data-src');
					pic.attr('src', src);
				}
			});

			function initImagesError(theImg) {
				var tagImgList = null;
				if(theImg) {
					var tagImgList = theImg;
					var alt = tagImgList.getAttribute("alt");
					if(!alt || alt == null || alt.trim() == "") {
						alt = "无图";
					}
					tagImgList.src = placeholder.getData({
						size: "100x100",
						text: alt,
						bgcolor: '#ccc',
						color: '#969696'
					});
				} else {
					var tagImgList = mui("img");
					mui.each(tagImgList, function(index, item) {
						item.onerror = function() {
							var alt = this.getAttribute("alt");
							if(!alt || alt == null || alt.trim() == "") {
								alt = "无图";
							}
							this.src = placeholder.getData({
								size: "100x100",
								text: alt,
								bgcolor: '#ccc',
								color: '#969696'
							});
						}
					});
				}
			}
		});*/
        /*]]>*/
	</script>

</html>